import { NCard, NImage } from "naive-ui";
import { flowdesignImage } from "@/hooks/useWflow";
import "./style.css";
export default defineComponent({
  name: "SmallView",
  setup() {
    let isMove = false;
    let offset = reactive([0, 0]);
    let clientX = 0,
      clientY = 0;
    let translateXY = [0, 0];
    const handleKeyDown = (e: MouseEvent) => {
      isMove = true;
      clientX = e["clientX"];
      clientY = e["clientY"];
    };
    const handleKeyMove = (e: MouseEvent) => {
      if (isMove) {
        let offsetx = e.clientX - clientX + translateXY[0];
        let offsety = e.clientY - clientY + translateXY[1];
        if (offsetx <= 0) {
          offsetx = 0;
        } else if (offsetx + 40 >= 110) {
          offsetx = 110 - 40;
        }
        if (offsety <= 0) {
          offsety = 0;
        } else if (offsety + 40 >= 110) {
          offsety = 110 - 40;
        }
        offset[0] = offsetx;
        offset[1] = offsety;
      }
    };
    const handleKeyUp = (e: MouseEvent) => {
      isMove = false;
      translateXY[0] = offset[0];
      translateXY[1] = offset[1];
    };
    let smallmake = ref();
    let smallview = ref();

    return () => (
      <div
        onMousedown={(e: MouseEvent) => {
          handleKeyDown(e);
        }}
        onMousemove={(e: MouseEvent) => {
          handleKeyMove(e);
        }}
        onMouseup={(e: MouseEvent) => {
          handleKeyUp(e);
        }}
        class="small-view absolute left-0 top-11 w-28 h-28 z-10"
        ref={smallview}
      >
        <NCard
          bordered={false}
          style={{
            height: "100%",
          }}
          contentStyle={{
            padding: "0",
          }}
        >
          <div class=" absolute h-full w-full left-0 top-0">
          <NImage height="100%" preview-disabled src={flowdesignImage.value} />
          </div>
          <div
            class="small-make absolute w-10 h-10 cursor-move"
            ref={smallmake}
            style={{
              left: `${offset[0]}px`,
              top: `${offset[1]}px`,
            }}
          ></div>
        </NCard>
      </div>
    );
  },
});
